<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-LZ0EWVRM4Z"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-LZ0EWVRM4Z');
    </script>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>cRonstrue - translate cron expressions to human readable descriptions</title>
    <!-- prettier-ignore -->
    <style>
      *{box-sizing:border-box}
      body{font-family:"Courier New",Courier,monospace;background:linear-gradient(90deg,#1CB5E0 0%,#000851 100%)}
      h1,h2{margin:5px 0}
      h1{font-size:2.5rem}
      h2{font-size:1.5rem}
      button,input,select{border:1px solid #a9a5a5;font-size:1rem}
      input{padding:5px}
      button,select{padding:4px}
      button{cursor:pointer;font-weight:800}
      main{background-color:#FFF;max-width:640px;margin:0 auto;border:1px solid #000;border-radius:5px;padding:25px;position:relative}
      section{text-align:center;border-top:1px solid gray;border-bottom:1px solid gray;padding:20px 0}
      div#description{padding-top:20px;color:#1234ae;font-weight:800;font-size:2rem;text-align:center}
      @media only screen and (max-width: 640px) {form{display:flex;flex-direction:column} span#logo-lettering{display:inline-block}}
    </style>
  </head>
  <body>
    <main>
      <h1>cRonstrue <span id="logo-lettering">* * * * *</span></h1>
      <h2>translate cron expressions to human readable descriptions</h2>
      <section>
        <form>
          <input type="text" id="expression" size="20" value="*/5 * * * *" />
          <select id="locale">
            <option value="en" selected>English</option>
            <option value="ca">Catalan</option>
            <option value="cs">Czech</option>
            <option value="es">Spanish</option>
            <option value="da">Danish</option>
            <option value="de">German</option>
            <option value="fi">Finnish</option>
            <option value="fr">French</option>
            <option value="ar">Arabic</option>
            <option value="fa">Farsi</option>
            <option value="he">Hebrew</option>
            <option value="it">Italian</option>
            <option value="id">Indonesia</option>
            <option value="ja">Japanese</option>
            <option value="ko">Korean</option>
            <option value="nb">Norwegian</option>
            <option value="nl">Dutch</option>
            <option value="pl">Polish</option>
            <option value="pt_BR">Portuguese (Brazil)</option>
            <option value="pt_PT">Portuguese (Portugal)</option>
            <option value="ro">Romanian</option>
            <option value="ru">Russian</option>
            <option value="sk">Slovakian</option>
            <option value="sl">Slovenian</option>
            <option value="sw">Swahili</option>
            <option value="sv">Swedish</option>
            <option value="tr">Turkish</option>
            <option value="uk">Ukrainian</option>
            <option value="zh_CN">Chinese (Simplified)</option>
            <option value="zh_TW">Chinese (Traditional)</option>
            <option value="be">Belarusian</option>
            <option value="hu">Hungarian</option>
            <option value="af">Afrikaans</option>
          </select>
          <button type="button" id="translate">Translate</button>
        </form>
        <div id="description">"Every 5 minutes"</div>
      </section>
      <footer>
        <p>
          cRonstrue is a JavaScript library that parses a cron expression and outputs a human readable description of
          the cron schedule. For example, given the expression "*/5 * * * *" it will output "Every 5 minutes". This
          library was ported from the original C# implementation called
          <a href="https://github.com/bradymholt/cron-expression-descriptor">cron-expression-descriptor</a> and is also
          available in a few other languages. The library was created by and is maintained by
          <a href="https://www.geekytidbits.com/">Brady Holt</a>, and has received many improvements from other
          <a href="https://github.com/bradymholt/cRonstrue/graphs/contributors">contributors</a>.
        </p>
        <h3>Features</h3>
        <ul>
          <li>Zero dependencies</li>
          <li>Supports all cron expression special characters including * / , - ? L W, #</li>
          <li>Supports 5, 6 (w/ seconds or year), or 7 (w/ seconds and year) part cron expressions</li>
          <li>Supports <a href="http://www.quartz-scheduler.org/">Quartz Job Scheduler</a> cron expressions</li>
          <li>i18n support with 30+ languages</li>
        </ul>
        <a href="https://github.com/bradymholt/cRonstrue">cRonstrue on GitHub</a>
      </footer>
      <a href="http://github.com/bradymholt/cRonstrue" class="github-corner" aria-label="View source on Github">
        <svg
          width="80"
          height="80"
          viewBox="0 0 250 250"
          style="fill: #151513; color: #fff; position: absolute; top: 0; border: 0; right: 0"
          aria-hidden="true"
        >
          <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
          <path
            d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
            fill="currentColor"
            style="transform-origin: 130px 106px"
            class="octo-arm"
          ></path>
          <path
            d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
            fill="currentColor"
            class="octo-body"
          ></path>
        </svg>
      </a>
    </main>
    <script defer src="https://unpkg.com/cronstrue@latest/dist/cronstrue.min.js"></script>
    <script defer src="https://unpkg.com/cronstrue@latest/dist/cronstrue-i18n.min.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        const expressionElement = document.getElementById("expression");
        const localeElement = document.getElementById("locale");
        const translateButtonElement = document.getElementById("translate");
        const descriptionElement = document.getElementById("description");

        translateButtonElement.onclick = () => {
          const expression = expressionElement.value;
          const locale = localeElement.value;
          const description = cronstrue.toString(expression, { throwExceptionOnParseError: false, locale });

          descriptionElement.innerText = `"${description}"`;
        };
      });
    </script>
  </body>
</html>
